<template>
  <div>
    <div class="head">
      <img src="../../img/ss.png" />
      <!-- <input type="text" name="" id="" placeholder="搜索" disabled @click="goSearch" /> -->
      <span @click="goSearch" class="search">搜索</span>
      <img src="../../img/tx.png" />
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item><img src="../../img/lb.png" /></van-swipe-item>
      <van-swipe-item><img src="../../img/lb.png" /></van-swipe-item>
      <van-swipe-item><img src="../../img/lb.png" /></van-swipe-item>
      <van-swipe-item><img src="../../img/lb.png" /></van-swipe-item>
    </van-swipe>
    <div class="dx">
      <div class="dxx" @click="onClickHot">
        <br>
        <img src="../../img/rmhk.png" />
        <ul>
          <li>热门好课</li>
        </ul>
      </div>
      <div class="dxx" @click="onClickFree">
        <br>
        <img src="../../img/mfzq.png" />
        <ul>
          <li>免费专区</li>
        </ul>
      </div>
      <div class="dxx" @click="onClickDis">
        <br>
        <img src="../../img/xsth.png" />
        <ul>
          <li>限时优惠</li>
        </ul>
      </div>
      <div class="dxx" @click="onClickGood">
        <br>
        <img src="../../img/jpkc.png" />
        <ul>
          <li>精品课程</li>
        </ul>
      </div>
    </div>
    <div class="discount">
      <div class="top">
        <h4>&ensp;限时特惠</h4>
        <p>全部&ensp;</p>
      </div>
    </div>
    <div class="discount2">
      <div class="but">
        <div class="col"><b>Word基础教程</b></div>
        <ul>
          <li>Word基础教程26天速成</li>
          <li><span class="one">￥58</span> <span class="two">￥104</span></li>
          <button><b>马上抢</b></button>
        </ul>
      </div>
      <div class="but">
        <div class="col1"><b>Excle基础教程</b></div>
        <ul>
          <li>Excle基础教程26天速成</li>
          <li><span class="one">￥58</span> <span class="two">￥104</span></li>
          <button><b>马上抢</b></button>
        </ul>
      </div>
      <div class="but">
        <div class="col2"><b>PPT基础教程</b></div>
        <ul>
          <li>PPT基础教程26天速成</li>
          <li><span class="one">￥58</span> <span class="two">￥104</span></li>
        </ul>
        <button><b>马上抢</b></button>
      </div>
      <div class="but">
        <div class="col3"><b>打字基础教程</b></div>
        <ul>
          <li>打字基础教程26天速成</li>
          <li><span class="one">￥58</span> <span class="two">￥104</span></li>
        </ul>
        <button><b>马上抢</b></button>
      </div>
    </div>
    <div class="artificial">
      <h4>&ensp;人工智能</h4>
      <p>全部&ensp;</p>
    </div>
    <div class="class-list">
      <div class="class-box" v-for="item in 3" :key="item">

        <div class="class-img">
          <img src="../../img/rg.jpg" />
        </div>
 
        <div class="class-text">
          <div class="text-1">
        <span>计算机人工智能、应用程序开发、编程语言到变成思想...</span>
          </div>
          <div class="text-2">
            <span>6677人正在学</span>
          </div>
          <div class="text-3">
            <div class="je">
              <span style="font-weight: 500; color: #ffc71c">¥58&nbsp;</span>
              <span
                style="
                  font-weight: 400;
                  color: #cccccc;
                  text-decoration: line-through;
                "
                >¥104</span
              >
            </div>
            <div class="btn">
              <span>限时特惠</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="artificial">
      <h4>&ensp;UI设计</h4>
      <p>全部&ensp;</p>
    </div>
    <div class="class-list">
      <div class="class-box" v-for="item in 3" :key="item">

        <div class="class-img">
          <img src="../../img/UI.jpg" />
        </div>
     
        <div class="class-text">
          <div class="text-1">
            <span>UI设计全进阶教程(名师课程)...</span>
          </div>
          <div class="text-2">
            <span>6677人正在学</span>
          </div>
          <div class="text-3">
            <div class="je">
              <span style="font-weight: 500; color: #ffc71c">¥58&nbsp;</span>
              <span
                style="
                  font-weight: 400;
                  color: #cccccc;
                  text-decoration: line-through;
                "
                >¥104</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="artificial">
      <h4>&ensp;产品设计</h4>
      <p>全部&ensp;</p>
    </div>
    <div class="class-list">
      <div class="class-box" v-for="item in 3" :key="item">
       
        <div class="class-img">
          <img src="../../img/cp.jpg" />
        </div>
   
        <div class="class-text">
          <div class="text-1">
            <span>产品设计从入门到精通(BAT名师授课)...</span>
          </div>
          <div class="text-2">
            <span>6677人正在学</span>
          </div>
          <div class="text-3">
            <div class="je">
              <span style="font-weight: 500; color: #ffc71c">¥58&nbsp;</span>
              <span
                style="
                  font-weight: 400;
                  color: #cccccc;
                  text-decoration: line-through;
                "
                >¥104</span
              >
            </div>
            <div class="btn">
              <span>限时特惠</span>
      </div>
    </div>
      </div>
    </div>
      </div>
    <div class="button">
      <a href="#">调整感兴趣的分类</a>
    </div>
    <br /><br /><br />
  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";
Vue.use(Swipe);
Vue.use(SwipeItem);

export default {
  methods:{
    onClickHot(){
      this.$router.push("/hotSession")
    },
    onClickFree(){
      this.$router.push("/freeArea")
    },
    onClickDis(){
      this.$router.push("/discount")
    },
    onClickGood(){
      this.$router.push("/goodSession")
    },
    goSearch(){
      this.$router.push("search")
    }
  }
  }

</script>

<style lang="scss" scoped>

.head {
  height: 30px;
  display: flex;
  justify-content: space-evenly;
  margin: 10px;
  img {
    width: 30px;
    height: 30px;
  }
  .search{
    width: calc(100% - 80px);
    display: inline-block;
    background-color: white;
    color: #ccc;
    border: 1px solid #ccc;
    font-size: 14px;
    padding-left: 5px;
    line-height: 30px;
  }
  input {
    width: calc(100% - 80px);
    outline: none;
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  height: 210px;
  font-size: 20px;
  line-height: 210px;
  text-align: center;
  img {
    width: 100%;
    height: 100%;
  }
}
.dx {
  display: flex;
  font-size: 18px;
  text-align: center;
    height: 100px;
  // line-height: 20px;
  justify-content: space-evenly;
  
  .dxx {
    
    width: 24%;
    // background-color: red;
    text-align: center;
    img {
      
      width: 50px;
      height: 50px;
    }
  }
}
.discount {
  .top {
    display: flex;
    justify-content: space-between;
    height: 50px;
    line-height: 0px;
    p {
      color: #666ee8;
      line-height: 1px;
    }
  }
}
.discount2 {
  display: flex;
  overflow: scroll;
  .but {
    margin-right: 5px;
    width: 170px;
    height: 220px;
    font-size: 18px;
    border: 1px solid white;
    border-radius: 5px;
    .col {
      width: 170px;
      height: 100px;
      background-color: #28d094;
      color: white;

      text-align: center;
      line-height: 100px;
    }
    .col1 {
      width: 170px;
      height: 100px;
      background-color: #666ee8;
      color: white;
      text-align: center;
      line-height: 100px;
    }
    .col2 {
      width: 170px;
      height: 100px;
      background-color: #ff6262;
      color: white;
      text-align: center;
      line-height: 100px;
    }
    .col3 {
      width: 170px;
      height: 100px;
      background-color: #289cc3;
      color: white;

      text-align: center;
      line-height: 100px;
    }
    ul {
      .one {
        display: inline-block;
        color: #ffc71c;
      }
      .two {
        display: inline-block;
        color: rgb(225, 225, 225);
      }
    }
    button {
      margin-left: 35px;
      background-color: #ffc71c;
      width: 100px;
      height: 30px;
      border: none;
      color: white;
    }
  }
}
.artificial {
  padding: 5px;
  display: flex;
  justify-content: space-between;
  p {
    color: #666ee8;
  }
}
.class-list {
  width: 100%;
  .class-box {
    width: 336px;
    height: 88px;
    margin: 0 auto;
    margin-bottom: 20px;
  display: flex;
    justify-content: space-between;
    align-items: center;
    .class-img {
      width: 124px;
      height: 81px;
      border-radius: 10px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .class-text {
      width: 192px;
      height: 81px;
      .text-1 {
        width: 182px;
        font-weight: 500;
        font-size: 14px;
      }
      .text-2 {
        margin-top: 3px;
        font-size: 12px;
        color: #999999;
  }
      .text-3 {
        width: 192px;
        height: 30px;
        font-size: 15px;
        margin-top: 3px;
        display: flex;
        .btn {
          width: 70px;
          height: 20px;
          text-align: center;
          border: 1px solid #ff6262;
          border-radius: 50px;
  span {
            font-weight: 500;
            font-style: normal;
            font-size: 12px;
            color: #ff6262;
            line-height: 20px;
  }
  }
  }
    }
  }
}

.button {
  margin-left: 25%;
  width: 200px;
  height: 50px;
  background-color: #fff4d2;
  border-radius: 30px;
  line-height: 45px;
  text-align: center;
    border: 1px solid red;
  a {
    color: red;
    font-weight: lighter;
    font-size: 13px;
  }
}
</style>